<template>
  <div class="orderManger">
    <ul class="searchs">
      <li>
        <span>快递单号</span>
        <el-input class="input-n" v-model="packagePost.logisticsId" placeholder="请输入单号"></el-input>
      </li>
      <li>
        <span>收件人手机</span>
        <el-input class="input-n" v-model="packagePost.receiveTelephone" placeholder="请输入手机号"></el-input>
      </li>
      <li>
        <span>第三方订单号</span>
        <el-input class="input-n last" v-model="packagePost.thirdOrderNo" placeholder="请输入淘宝/京东等订单号"></el-input>
      </li>
    </ul>
    <div class="navTitle">
      <navTitle :activeIndex="activeIndex" :navArr="navArr" @check="checkNav">
        <span class="button-w searchBtn" slot="right" @click="searchDetail">
          查询详情
        </span>
      </navTitle>
    </div>
    <div>
      <noCont v-if="activeIndex==0 && isEmpty"></noCont>
      <div class="tables" v-if="activeIndex==0 && !isEmpty">
        <orderListBase :tableData="tableData" @lookDetail="lookDetail" @refresh="search"></orderListBase>
      </div>
      <div class="orderMangerDetail" v-if="activeIndex==1">
        <orderDetail @statusChange="statusChange" @refresh="search" :tableData="tableData" :navIndex="navIndex"></orderDetail>
      </div>
      <div class="pager" v-if="tableData.length > 0">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizeArray" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import NavTitle from '../../base/navTitle/index'
import OrderDetail from './orderDetail/index'
import NoCont from '../../base/noCont/index'
import OrderListBase from './orderDetail/orderListBase'
import { mapGetters } from 'vuex'
import { pageCommon } from '../../../assets/js/mixin.js'
export default {
  name: 'orderManger',
  mixins: [pageCommon],
  components: {
    NavTitle,
    OrderDetail,
    NoCont,
    OrderListBase
  },
  data () {
    return {
      activeIndex: 0,
      navIndex: 0,
      navArr: ['发货任务管理', '详细订单管理'],
      noImg: require('../../../assets/images/noContainer.svg'),
      importActionObj: {
        show: false,
        checkList: ['三方订单号', '快递公司', '快递单号', '收件人信息(姓名-手机号-收货地址)'],
        commentType: 1,
        packageList: [],
        textComment: '',
        isNever: false,
        row: ''
      },
      time: '',
      tableData: [],
      packagePost: { // 包裹查询参数对象
        logisticsId: '',
        packageStatus: '',
        receiveTelephone: '',
        thirdOrderNo: '',
        orderId: ''
      }
    }
  },
  computed: {
    apiUrl () {
      if (this.activeIndex === 0) {
        return '/api/order/search/getOrderListForSeller'
      } else {
        return '/api/order/search/getPackageListForSeller'
      }
    },
    params () {
      if (this.activeIndex === 0) {
        return {
          sellerAccountId: this.userInfo.sellerAccountId,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
      } else {
        return {
          start: parseInt(this.navIndex) === 0 ? this.time[0] : '',
          end: parseInt(this.navIndex) === 0 ? this.time[1] : '',
          logisticsId: this.packagePost.logisticsId,
          packageStatus: this.packagePost.packageStatus === 6 ? '' : this.packagePost.packageStatus, // TOPAY("1","待支付"), TOSEND("2","已支付待发货"), SENDED("3","已发货"), TOREFUND("4","待退款"), REFUNDED("5","已退款"), REJECTREFUND("6","驳回退款")
          flagSendAgain: this.packagePost.packageStatus === 6 ? '1' : '',
          receiveTelephone: this.packagePost.receiveTelephone,
          thirdOrderNo: this.packagePost.thirdOrderNo,
          sellerAccountId: this.userInfo.sellerAccountId,
          orderId: this.packagePost.orderId,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
      }
    },
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    checkNav (index) {
      this.activeIndex = index
      this.search()
    },
    setList (data) {
      this.tableData = data
    },
    lookDetail (row) { // 点击查看包裹详情按钮
      /* 处理查看订单过来的详情, 筛选条件不需要 */
      this.packagePost.logisticsId = ''
      this.packagePost.receiveTelephone = ''
      this.packagePost.thirdOrderNo = ''
      /***************************************/
      this.activeIndex = 1
      this.navIndex = 6
      this.packagePost.orderId = row.orderId
      this.$nextTick(() => {
        this.packagePost.orderId = ''
      })
    },
    statusChange (statusArr) { // 包裹状态选择改变 arr [ statusObj index ]
      if (parseInt(statusArr[1]) === 0) { // 近三日
        this.navIndex = 0
        this.initTime()
      } else {
        this.navIndex = parseInt(statusArr[1])
        this.time = ''
      }
      this.packagePost.packageStatus = statusArr[0].status
      this.search()
    },
    searchDetail () { // 查询包裹
      this.activeIndex = 1
      this.navIndex = 6
      this.packagePost.orderId = ''
      this.search()
    },
    // 初始化时间
    initTime () {
      let today = new Date()
      let start = new Date(today.getTime() - 3600 * 1000 * 24 * 3)
      let s = start.toLocaleDateString().split('/')
      s = [s[0], s[1] < 10 ? '0' + s[1] : s[1], s[2] < 10 ? '0' + s[2] : s[2]].join('-') + ' 00:00:00'
      let e = today.toLocaleDateString().split('/')
      e = [e[0], e[1] < 10 ? '0' + e[1] : e[1], e[2] < 10 ? '0' + e[2] : e[2]].join('-') + ' 23:59:59'
      this.time = [s, e]
    }
  },
  created () {
    if (this.$route.query.orderId) {
      this.lookDetail({ orderId: this.$route.query.orderId })
    } else if (this.$route.query.thirdOrderNo) {
      this.packagePost.thirdOrderNo = this.$route.query.thirdOrderNo
      this.searchDetail()
    } else if (this.$route.query.logisticsId) {
      this.packagePost.logisticsId = this.$route.query.logisticsId
      this.searchDetail()
    } else if (this.$route.query.receiveTelephone) {
      this.packagePost.receiveTelephone = this.$route.query.receiveTelephone
      this.searchDetail()
    } else if (this.$route.query.packageStatus) {
      this.activeIndex = 1
      // this.packagePost.packageStatus = this.$route.query.packageStatus
      // this.search()
    } else if (this.$route.query.sendAgain) {
      this.activeIndex = 1
      this.navIndex = 5
      this.search()
    } else if (this.$route.query.query === 'all') {
      this.activeIndex = 1
      this.navIndex = 6
      this.search()
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/index.styl'
.orderManger
  .searchs
    display flex
    flex-wrap wrap
    li
      margin-bottom 20px
    span
      fontSize($fontSize, 1, $fontColor)
      margin-right 12px
    .input-n
      width 220px
      margin-right 24px
    .last
      margin-right 0
  .navTitle
    margin-bottom 20px
  .tables
    font-size 14px
    .tips
      display inline-block
      position relative
      &:before
        content ''
        position absolute
        left -14px
        top 0
        bottom 0
        margin auto 0
        width 8px
        height 8px
        border-radius 50%
    .success
      &:before
        background #1ECD01
    .error
      &:before
        background $mainColor
    .cancel
      &:before
        background #FF7503
    .textBtn
      margin 6px 8px
  .alertGroup
    padding 40px
    .cont
      h2
        fontSize($fontSize-l, 1, $fontColor)
      .list
        border-bottom 1px solid #EBEEF5
        max-height 350px
        overflow auto
        margin-top 20px
        li
          margin-bottom 20px
          display flex
          justify-content space-between
          fontSize($fontSize, 20px, $fontColor)
          img
            width 60px
            height 60px
          span
            // flex 1
            text-align left
          p
            width 40px
            display flex
            flex-direction column
            justify-content space-between
      .total
        display flex
        margin 20px 10px
        justify-content space-between
        fontSize($fontSize, 1, $fontColor)
        i
          color $mainColor
    .backCont
      text-align left
    .buttons
      text-align center
      margin-top 40px
      b
        padding 0 20px
  .importAttition
    padding 40px
    text-align center
    h1
      fontSize($fontSize-l, 1, $fontColor)
      margin-bottom 20px
      text-align center
    .checkBox
      text-align left
      margin-bottom 20px
    .commentBox
      text-align center
    .packageList
      text-align left
    .commentDiy
      text-align center
    .boxShadow
      padding 20px 40px
    .footer
      text-align center
      margin-top 30px
      margin-bottom 30px
    .urlComment
      text-align left
      p
        fontSize($fontSize, 1, $fontColor)
        line-height 20px
        strong
          fontSize($fontSize-m, 1, $mainColor)
        a
          fontSize($fontSize, 1, #2C7DFF)
          text-decoration none
</style>
